<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="js/http_cdn.bootcdn.net_ajax_libs_twitter-bootstrap_4.5.3_js_bootstrap.bundle.js"></script>

    <link type="text/css" rel="stylesheet" href="js/http_cdn.bootcdn.net_ajax_libs_twitter-bootstrap_4.5.3_css_bootstrap-grid.css">
    <style>
        .data {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>
    <script>
        let result = {
            status: 200,
            msg: "success",
            data: [
                {
                    id: 1,
                    name: "手机",
                    level: 1,
                },
                {
                    id: 2,
                    name: "服装",
                    level: 1,
                },
            ]

        }
        // window.location.href = "category_editor.html?id=1"

        $(function () {
            let data = {
                page: 1,
                size: 10
            };
            // $.get(CATEGORY_URL, data, function (result) {
            if (result.status === 200) {
                if (result.data.length > 0) {
                    for (let i = 0; i < result.data.length; i++) {
                        let category = result.data[i]
                        $("#content")
                            .append(
                                $("<tr>")
                                    .append(
                                        //添加序号
                                        $("<td>")
                                            .text(i + 1)
                                            .addClass("text-center")
                                    )
                                    // 添加分类名称
                                    .append(
                                        $("<td>")
                                            .text(category.name)
                                            .addClass("text-center")
                                    )
                                    .append(
                                        $("<td>")
                                            .append($("<button class='btn btn-info'>编辑</button>")).click(function () {
                                            window.location.href = "category_editor.html?id=" + category.id
                                        }).append($("<button class='btn btn-danger'>删除</button>")).click(function () {
                                            // 发送post请求 删除数据
                                            $(this).parent("tr").remove()
                                        })
                                    )
                                    .append()
                                    .append()
                            )
                    }
                } else {
                    $("#content")
                        .before($("<p>暂无数据</p>"))
                        .hide();
                }
            } else {
                $("#content")
                    .before($("<p>暂无数据</p>"))
                    .hide();
            }
            // });
        })
    </script>
</head>
<body>
<div id="warp" class="container-fluid">
    <div class="data clearfix">
        <div class="row pull-left">
            <span class="glyphicon glyphicon-list-alt"></span>
            <span>数据列表</span>
        </div>
        <button class="pull-right btn btn-sm btn-default">添加</button>
    </div>
    <table id="content" class="table table-bordered table-condensed">
        <tr>
            <th class="text-center">编号</th>
            <th class="text-center">分类名称</th>
            <th class="text-center">级别</th>
            <th class="text-center">商品数量</th>
            <th class="text-center">数量单位</th>
            <th class="text-center">导航栏</th>
            <th class="text-center">是否显示</th>
            <th class="text-center">排序</th>
            <th class="text-center">设置</th>
            <th class="text-center">操作</th>
        </tr>
        <!--<tr>
            <td class="text-center">1</td>
            <td class="text-center">编号</td>
            <td class="text-center">编号</td>
            <td class="text-center">编号</td>
            <td class="text-center">编号</td>
            <td class="text-center">编号</td>
            <td class="text-center">编号</td>
            <td class="text-center">编号</td>
            <td class="text-center">编号</td>
            <td class="text-center">编号</td>
        </tr>-->
    </table>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

</body>
</html>